<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="page.param.name" placeholder="活动名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button :loading="loading" class="filter-item" style="margin-left: 10px;" type="danger" icon="el-icon-delete" @click="deleteData">
        删除
      </el-button>
      <el-button class="filter-item" @click="exportData">
        导出
      </el-button>
      <el-button :loading="loading" class="filter-item" style="margin-left: 10px;" type="danger" icon="el-icon-delete" @click="deleteData">
        删除
      </el-button>
      <el-button class="filter-item" type="danger" style="margin-left: 10px;" @click="updateStatus(-1)">
        审核不通过
      </el-button>
      <el-button class="filter-item" type="success" style="margin-left: 10px;" @click="updateStatus(2)">
        审核通过
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column align="center" label="序号" type="index" width="50" />
      <el-table-column align="center" label="活动名称" prop="name"/>
      <el-table-column align="center" label="学号" prop="num" width="200" />
      <el-table-column align="center" label="姓名" prop="userName" width="200" />
      <el-table-column align="center" label="所在院系" prop="faculty" width="200" />
      <el-table-column align="center" label="班级" prop="grades" width="200" />
      <el-table-column align="center" label="手机号" prop="phone" width="200" />
      <el-table-column align="center" label="QQ" prop="qq" width="200" />
      <el-table-column align="center" label="创建时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="page.total>0" :total="page.total" :current-page="page.page" :page-size="page.limit" @current-change="fetchData" />
  </div>
</template>

<script>
import { page, add, edit, deleteByIds, updateStatusData } from '@/api/activeHistory'
import { exportJson2Excel } from '@/utils/export'
import { Message } from 'element-ui'
import { validNotNull } from '@/utils/validate'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  data() {
    const validateText = (rule, value, callback) => {
      if (!validNotNull(value)) {
        callback(new Error('必填'))
      } else {
        callback()
      }
    }
    return {
      list: null,
      listLoading: true,
      baseUrl: 'http://localhost:8080',
      loading: false,
      page: {
        page: 1,
        size: 10,
        total: 0,
        param: { name: '' }
      },
      multipleSelection: [],
      dialogFormVisible: false,
      state: 'add',
      form: {
        name: '',
        detail: '',
        imgId: '',
        type: '',
        fileId: ''
      },
      fileList: [],
      formRules: {
        name: [{ required: true, trigger: 'blur', validator: validateText }],
        detail: [{ required: true, trigger: 'blur', validator: validateText }],
        type: [{ required: true, trigger: 'blur', validator: validateText }]
      },
      headers: { Authorization: getToken() }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 获取列表数据
    fetchData(val) {
      if (val != null && val !== '') {
        this.page.page = val
      }
      this.listLoading = true
      page(this.page).then(response => {
        this.list = response.result.records
        this.page.total = response.result.total
        this.listLoading = false
      })
    },
    // 选中改变
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 列表筛选
    handleFilter() {
      this.fetchData()
    },
    // 提交方法
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.imgId === '' || this.form.imgId === null) {
            this.$message.warning(`请上传课程图片！`)
            return false
          }
          if (this.state === 'add') {
            // 新增
            add(this.form).then(res => {
              if (res.code === '200'){
                this.dialogFormVisible = false
                this.fetchData()
                Message.success(res.result)
              }
            }).catch((err) => {
              console.log(err)
            })
          } else {
            // 修改
            edit(this.form).then(res => {
              if (res.code === '200'){
                if (res.code === '200'){
                  this.dialogFormVisible = false
                  this.fetchData()
                  this.form = {
                    name: '',
                    detail: '',
                    imgId: '',
                    type: '',
                    fileId: ''
                  }
                  Message.success(res.result)
                }
              }
            }).catch((err) => {
              console.log(err)
            })
          }
        } else {
          return false
        }
      })
    },
    // 新增
    handleCreate() {
      this.fileList = []
      this.form = {
        name: '',
        detail: '',
        imgId: '',
        fileId: '',
        type: ''
      }
      this.dialogFormVisible = true
    },
    // 查看
    viewClick(data) {
      this.state = 'view'
      this.dialogFormVisible = true
      this.form = data
    },
    // 修改
    editClick(data) {
      this.dialogFormVisible = true
      this.state = 'edit'
      this.form = data
    },
    // 删除
    deleteData() {
      this.loading = true
      const ids = []
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach(item => {
          ids.push(item.id)
        })
        deleteByIds(ids).then(res => {
          this.loading = false
          if (res.code ==='200'){
            this.fetchData()
            Message.success(res.result)
          }
        }).catch((err) => {
          this.loading = false
          console.log(err)
        })
      } else {
        this.loading = false
        Message.error('请要删除的数据！')
      }
    },
    // 文件导出
    exportData() {
      page({
        page: -1,
        size: -1,
        total: -1,
        param: { name: this.page.param.name }
      }).then(response => {
        let list = response.result.records
        var exportData = []
        var i = 1
        for (const item of list) {
          exportData.push({
            序号: i++,
            活动名称: item.name,
            学号: item.num,
            姓名: item.userName,
            所在院系: item.faculty,
            班级: item.grades,
            手机号: item.phone,
            QQ: item.qq,
            创建时间: item.createTime
          })
        }
        exportJson2Excel(exportData, "活动报名信息")
      })
    },
    // 修改状态
    updateStatus(status) {
      const ids = []
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach(item => {
          if(status === 1){
            ids.push(item.id)
          }
        })
        if (ids.length<=0){
          Message.error('请选择未审批的数据！')
        }
        updateStatusData({ ids: ids, status: status}).then(res=>{
          if (res.code ==='200'){
            Message.success("审批成功！")
          }
        })
      } else {
        Message.error('请要审批的数据！')
      }
    }
  }
}
</script>
<style scoped>

</style>
